<template>
    <div class="addProductInfo">
        <el-card shadow="never" style="width:100% ; border:none">
            <div slot="header">
                <span class="search-title">基本信息</span>
            </div>
            <el-form :model="baseInfoForm" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="公司名称" prop="name">
                    <el-input v-model="baseInfoForm.name" class="normal-input"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="contactor">
                    <el-input v-model="baseInfoForm.contactor" class="normal-input"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="baseInfoForm.mobile" class="normal-input" maxlength="11" ></el-input>
                </el-form-item>
                <el-form-item label="座机号码" prop="phone">
                    <el-input
                        v-model="baseInfoForm.phone1"
                        maxlength="4"
                        class="short-input"
                        @change="phoneChange()"
                    ></el-input>
                    <el-input
                        v-model="baseInfoForm.phone2"
                        class="phone-input"
                        maxlength="8"
                        @change="phoneChange()"
                    ></el-input>
                </el-form-item>
                <el-form-item label="办公地址" prop="address">
                    <el-input v-model="baseInfoForm.address" class="normal-input"></el-input>
                </el-form-item>
            </el-form>
            <!-- </el-main> -->
        </el-card>
        <!-- </el-container> -->
    </div>
</template>
<script>
import { validateMobile, validatInteger } from '@/utils/validate.js';
import { mapGetters } from 'vuex';
import { checkNameExist } from '@/api/supplier';
export default {
    name: 'baseInfo',
    mounted() {
        this.init();
        // 此阶段props值不一定能取到，使用路由判断
        if (this.$route.path.indexOf('update') > -1) {
            this.opmode = 1;
        } else {
            this.opmode = 0;
        }
    },
    computed: {
        ...mapGetters(['supplierDetailInfo'])
    },
    watch: {
        supplierDetailInfo: function() {
            if (this.supplierDetailInfo) {
                let telphone = this.supplierDetailInfo.phone + '';
                this.baseInfoForm = {
                    ...this.baseInfoForm,
                    ...this.supplierDetailInfo,
                    phone1: telphone && telphone.substring(0, 3),
                    phone2:  telphone && telphone.substring(3, telphone.length)
                };
                
                this.initailName = this.baseInfoForm.name
                this.id = this.supplierDetailInfo.id;
            }
        }
    },
    porps: {
        mode: 1
    },
    data() {
        var validateNameExist = (rule, value, callback) => {
            let id = this.id ? this.id : null;
            checkNameExist({ name: value, id })
                .then(res => {
                    if (res.data.success == true && res.data.data == true) {
                        return callback(new Error('公司名已存在，请重新输入'));
                    } else {
                        callback();
                    }
                })
                .catch(err => {
                    callback();
                });
        };

        var validateMobileForm = (rule, value, callback) =>{
            if (!value|| validateMobile(value))  {
                callback()
            }
            callback(new Error("请输入正确的手机号码格式"))
        }

        var validatePhone = (rule, value, callback) =>{
            if ( !value|| (validatInteger(value) && value.length >7 && value.length < 13)){
                callback()
            }
            callback(new Error("请输入正确的电话号码格式"))
        }
        return {
            opmode: 0,
            categoryList: [],
            baseInfoForm: {
                name: '',
                phone: '',
                address: '',
                contactor: '',
                name: ''
            },
            initailName: '',

            rules: {
                name: [
                    { required: true, message: '请输入供应商名称', trigger: 'blur' },
                    {
                        validator: validateNameExist,
                        trigger: 'blur'
                    }
                ],
                mobile:[{validator:validateMobileForm, trigger: 'blur'}],
                phone:[{validator:validatePhone, trigger: 'blur'}]
            }
        };
    },
    methods: {
        init() {},
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        validateForm() {
            return this.$refs['ruleForm'].validate();
        },
        phoneChange() {
            this.baseInfoForm.phone = this.baseInfoForm.phone1 + this.baseInfoForm.phone2;
        }
    }
};
</script>

<style scoped>
.search-title {
    font-size: 18px;
    font-weight: bold;
}

.normal-input {
    width: 400px;
}
.short-input {
    width: 100px;
}
.phone-input {
    width: 295px;
}
</style>
